<template>
  <div class="father">
    <div class="InvoiceTmpDiv" id="pdfDom" >
      <div class="row" style="    border-top: none;
    border-left: none;
    margin-top: 15px;
    border-right: none;">

        <div class="col  title col_18 no-border">{{ receiptInfo.invoiceName }}</div>
        <div class="col  extra col_6 no-border" style="text-align: left;">
          <div>
            <span class="label title-label">发票代码</span>：
            <span class="content">{{ receiptInfo.invoiceNum }}</span>
          </div>
          <div>
            <span class="label title-label">发票号码</span>：
            <span class="content">{{ receiptInfo.invoiceCode }}</span>
          </div>
          <div>
            <span class="label title-label">开票日期</span>：
            <span class="content">{{ receiptInfo.createDate }}</span>
          </div>
          <div>
            <span class="label title-label">校验码</span>：
            <span class="content">46197546795832</span>
          </div>
        </div>
      </div>
      <div class="row height84">
        <div class="col  col_1 no-border">购买方</div>
        <div class="col  col_15">
          <div>
            <span class="label">名称</span>：
            <span class="content">{{ receiptInfo.buyName }}</span>
          </div>
          <div>
            <span class="label">纳税人识别号</span>：
            <span class="content">{{ receiptInfo.buyIdentity }}</span>
          </div>
          <div>
            <span class="label">地址及电话</span>：
            <span class="content">{{ receiptInfo.addressAndPhone }}</span>
          </div>
          <div>
            <span class="label">开户行及账号</span>：
            <span class="content">{{ receiptInfo.account }}</span>
          </div>

        </div>

        <div class="col  col_1">密码区</div>
        <div class="col  col_6"></div>
      </div>

      <div class="row" style="position: relative">
        <div class="col  col_8 no-border">
          <div class="text-center" style=" position: absolute;top: 10px;left: 93px;">
            订单号码/名称
          </div>
          <div style="margin-top: 15px">{{ this.$route.params.oid }}</div>

          <!-- 调用 renderDetailsItem 方法传入参数 '1' -->
        </div>
        <div class="col  col_4 ">
          <div class="text-center">名称</div>
          <div v-html="renderDetailsItem('goodName')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '1' -->
        </div>
        <div class="col  col_4">
          <div class="text-center">规格型号</div>
          <div v-html="renderDetailsItem('specificationsModels')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '2' -->
        </div>
        <div class="col">
          <div class="text-center">单位</div>
          <div v-html="renderDetailsItem('measure')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '3' -->
        </div>
        <div class="col">
          <div class="text-center">数量</div>
          <div v-html="renderDetailsItem('goodCount')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '4' -->
        </div>
        <div class="col  col_2">
          <div class="text-center">单价</div>
          <div v-html="renderDetailsItem('price')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '5' -->
        </div>
        <div class="col  col_2">
          <div class="text-center">金额</div>
          <div v-html="renderDetailsItem('goodPrice')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '6' -->
        </div>
        <div class="col">
          <div class="text-center">税率</div>
          <div v-html="renderDetailsItem('rate')"></div>
        </div>
        <div class="col  col_2">
          <div class="text-center">税额</div>
          <div v-html="renderDetailsItem('tax')"></div>
          <!-- 调用 renderDetailsItem 方法传入参数 '8' -->
        </div>
      </div>
      <div class="row" style="text-align: left">
        <div class="col  col_15 no-border" style="text-align: left">价税合计（大写）{{ receiptInfo.chineseNum }}</div>
        <div class="col  no-border" style="borderLeft: none">
          （小写）<span>￥{{ Number(receiptInfo.totalPrice).toFixed(2) }}</span>
        </div>
      </div>
      <div class="row height84">
        <div class="col  col_1 no-border">销售方</div>
        <div class="col  col_14">
          <div>
            <span class="label">名称</span>：
            <span class="content">{{ receiptInfo.saleName }}</span>
          </div>
          <div>
            <span class="label">纳税人识别号</span>：
            <span class="content">{{ receiptInfo.saleIdentity }}</span>
          </div>
          <div>
            <span class="label">地址及电话</span>：
            <span class="content">{{ receiptInfo.saleAddressAndPhone }}</span>
          </div>
          <div>
            <span class="label">开户行及账号</span>：
            <span class="content">{{ receiptInfo.saleAccount }}</span>
          </div>
        </div>
        <div class="col  col_1">备注</div>
        <div class="col  col_7">{{ receiptInfo.note }}</div>
      </div>
      <div class="row last-row">
        <div class="col  col_6 no-border">收款人：<span class="content">{{ receiptInfo.getMoneyOne }}</span></div>
        <div class="col  col_6 no-border">复核：{{ receiptInfo.review }}</div>
        <div class="col  col_6 no-border">开票人：{{ receiptInfo.billing }}</div>
        <div class="col  col_5 no-border">销售方：（章）</div>
      </div>
    </div>
  </div>

</template>


<script>

import {request_financial} from "@/util/request";
import toChineseNumber from "@/util/toChineseNumber";
import router from "@/router";
import calculateInvoiceChecksum from "@/util/InvoiceCheckNum";
import htmlToPdf from "@/util/htmlToPdf";

// // props: {
// checkNum: {
//   type: Number,
//       required: true,
// },
// receiptInfo: {
//   type: Object,
//       required: true,
// },
// data: {
//   type: Array,
//       required: true,
// },
export default {
  name: "test",
  data() {
    return {
      checkNum: 0,
      receiptInfo: {},
      data: []
    }
  },
  methods: {
    //遍历data数组然后对里面对象的属性进行查询，直到找到传参，然后渲染一个div
    renderDetailsItem(field) {
      return `<Item key='1'>
        ${(this.data || []).map((item, idx) => `<div class='item' key="${field}-${idx}">${item[field]}</div>`).join('')}
      </Item>`;
    },
    getPrintScreen() {
      // 调用htmlToPdf工具函数
      htmlToPdf.getPdf('发票'+"-"+this.$route.params.oid);
      // 定时器模拟按钮loading动画的时间
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 1000);

    },

    getReceiptInfo() {

      request_financial.post("invoice/get", {
        orderId: this.$route.params.oid
      }).then(res => {

        this.receiptInfo = res.data.data
        this.data = res.data.data.invoiceGoodInfoList
        this.data.forEach((item) => {
          item.totalPay = this.receiptInfo.totalPrice
          item.price = Number(item.price).toFixed(2)
          item.goodPrice = Number(item.price) * Number(item.goodCount)
          item.tax = Number(0).toFixed(2)
        })
        console.log(res.data)
        this.receiptInfo.chineseNum = toChineseNumber(this.receiptInfo.totalPrice)
        this.checkNum = calculateInvoiceChecksum(this.receiptInfo.invoiceCode, this.receiptInfo.invoiceNum.substring(2))
      })

    },
  },
  beforeMount() {
    this.getReceiptInfo()

  },

  updated() {
   this.getPrintScreen()
  }
}
</script>

<style scoped>

.father {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
  padding: 10px 20px;

}

.InvoiceTmpDiv {
  box-shadow: 7px 7px 9px 5px #918f8f; /*盒子阴影*/;
  font-size: 12px;
  width: 760px;
  margin: 0 auto;
  padding: 0 20px;
}


.InvoiceTmpDiv .title {
  font-size: 26px;
  color: #B16363;
  text-align: center;
  line-height: 56px;
}

.InvoiceTmpDiv .extra {
  color: #B15B16;
}

.InvoiceTmpDiv .extra .content {
  color: #181818;
}

.InvoiceTmpDiv .height84 {
  height: 84px;
  text-align: left;
}

.InvoiceTmpDiv .row {
  border: 1px solid #B16363;
  border-bottom: none;
  color: #B15B16;
}

.InvoiceTmpDiv .row .content {
  color: #181818;
}

.InvoiceTmpDiv .last-row .content {
  color: #181818;
}

.InvoiceTmpDiv .last-row {
  color: #B15B16;
  border-top: 1px solid #B16363;
  border-left: none;
  border-right: none;
  height: 50px;
}

.InvoiceTmpDiv .label {
  width: 78px;
  display: inline-block;
  text-align-last: justify;
  text-align: justify;
}

.InvoiceTmpDiv .title-label {
  width: 52px;
}

.InvoiceTmpDiv .col_1 {
  width: 33.3%;
}

.InvoiceTmpDiv .col_2 {
  width: 8.33%;
}

.InvoiceTmpDiv .col_3 {
  width: 12.5%;
}

.InvoiceTmpDiv .col_5 {
  width: 20.83%;
}

.InvoiceTmpDiv .col_6 {
  width: 25%;
}

.InvoiceTmpDiv .col_7 {
  width: 29.16%;
}

.InvoiceTmpDiv .col_8 {
  width: 33.33%;
}

.InvoiceTmpDiv .col_14 {
  width: 58.33%;
}

.InvoiceTmpDiv .col_15 {
  width: 62.5%;
}

.InvoiceTmpDiv .col_17 {
  width: 70.83%;
}

.InvoiceTmpDiv .col_18 {
  width: 75%;
}

.InvoiceTmpDiv .col_24 {
  width: 100%;
}

.InvoiceTmpDiv .col {
  display: inline-block;
  padding: 8px;
  box-sizing: border-box;
  vertical-align: middle;
  border-left: 1px solid #B16363;
  height: 100%;
}

.InvoiceTmpDiv .col.no-border {
  border-left: none;

}

.InvoiceTmpDiv .col .text-center {
  text-align: center;
}

.InvoiceTmpDiv .item {
  text-align: center;
  color: #181818;
  padding: 4px 0;
}
</style>